<template>
  <div class="home">
    <div class="flex-row-center-space">
      <div style="width: 50%" v-for="item in homeItems" :key="item.key">
        <div class="home-item-title">{{ item.title }}</div>
        <div style="padding: 0 15%" class="flex-row-center-space">
          <div
            style="width: 50%"
            class="flex-col-center-center"
            v-for="childItem in item.items"
            :key="childItem.key"
          >
            <div>{{ abstractInfo[childItem.key] || 0 }}</div>
            <div style="margin-top: 40px">{{ childItem.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onActivated, ref } from 'vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { homeItems } from '@/views/home/data';
  import { SalesOrderAbstractModel } from 'mc-c2b2m-operator-api/types/order';

  const { OrderModule } = mcApi;
  const { SalesOrderApi } = OrderModule;

  const abstractInfo = ref<SalesOrderAbstractModel>({
    currentDayTradeAmount: 0,
    currentDayTradeOrderNum: 0,
    currentMonthTradeAmount: 0,
    currentMonthTradeOrderNum: 0,
  });
  onActivated(async () => {
    abstractInfo.value = await SalesOrderApi.collectSalesOrderAbstract();
  });
</script>
<script lang="ts">
  export default {
    name: 'Home',
  };
</script>

<style scoped lang="less">
  .home {
    width: 100%;
    padding: 50px;
    font-size: 20px;
    background: #fff;
    .home-item-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 60px;
    }
  }
</style>
